<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="desc-wrap">
				<div class="operate-des" style="top:130px;text-align: left;">
					<p class="operate-title clear">
						<span class="left">操作按钮说明</span>
						<img class="retract right" v-if="showDes" @click="showDes=!showDes" style="margin-top: 3px;" src="http://xnhloc.xnhkfpt.com/qudao/static/channelthree/qwvedio/images/retract.svg">
						<img class="spread right" v-if="!showDes" @click="showDes=!showDes" style="margin-top: 3px; " src="http://xnhloc.xnhkfpt.com/qudao/static/channelthree/qwvedio/images/spread.svg">
					</p>

					<ul class="fixed-content" v-if="showDes">
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/edit.svg" />
							<p class="operate-text">编辑</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/detail.svg" class="operate-icon">
							<p class="operate-text">查看</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<span class="btn pay-btn" style="margin-right: 0;">付</span>
							<p class="operate-text">支付</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/member.svg" class="operate-icon">
							<p class="operate-text">成员管理</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/template.svg" class="operate-icon">
							<p class="operate-text">短信模板</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="head">
				<!--<div class="tab-panel clear">
					<p class="tab-item" @click="tab(1)" :class="searchData.circletype==1?'selected-item':''">统付</p>
					<p class="tab-item" @click="tab(2)" :class="searchData.circletype==2?'selected-item':''">个付</p>
				</div>-->
				<div class="search-wrap">
					<div class="form-item">
						<div class="form-item-content" style="width: auto;">
							<el-radio-group clearable @change="search" v-model="searchData.range">
								<el-radio :label="1">最近一月</el-radio>
								<el-radio :label="2">最近半年</el-radio>
								<el-radio :label="3">所有</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title" style="width: auto;">集团名称/成员号码：</p>
							<div class="form-item-content" style="width: 200px;">
								<el-input clearable v-model="searchData.circleoldname" placeholder="可支持集团名称、号码搜索"></el-input>
							</div>
						</div>
						<div class="form-item left">
							<el-button type="primary" @click="search">查询</el-button>
						</div>
						<div class="form-item right">
							<p class="left fee-desc" @click="showFeeDetail">资费说明</p>
							<!--<el-button class="left" type="primary" @click="qualificationDesVisible=true">资质说明</el-button>-->
							<el-button class="left" type="primary" @click="addGroup">新建集团</el-button>
						</div>
					</div>
				</div>
			</div>

			<template v-if="list.length">
				<div class="table-wrap">
					<el-table size="middle" v-loading="loading" :data="list" style="width: 100%">
						<el-table-column prop="circleoldname" label="集团名称" min-width="180"></el-table-column>
						<el-table-column prop="linkman" label="联系人" min-width="100"></el-table-column>
						<el-table-column prop="linkphone" label="联系电话" min-width="120"></el-table-column>
						<el-table-column prop="membercount" label="成员数" width="70"></el-table-column>
						<!--<el-table-column prop="orderstatus" v-if="searchData.circletype==1" width="80" label="状态">
							<template slot-scope="scope">
								<span v-if="scope.row.orderstatus==1">待支付</span>
								<span v-if="scope.row.orderstatus==2">审核中</span>
								<span v-if="scope.row.orderstatus==3">创建成功</span>
								<span v-if="scope.row.orderstatus==4">创建失败</span>
							</template>
						</el-table-column>-->
						<el-table-column prop="createtime" min-width="180" label="提交时间"></el-table-column>
						<el-table-column prop="address" :min-width="140" label="操作">
							<template slot-scope="scope">
								<div class="clear" style="padding-top: 3px;">
									<div class="btn" :class="scope.row.circlepoint?'need-operate':''" title="编辑" v-if="scope.row.orderstatus==1||scope.row.orderstatus==4||scope.row.circlepoint" @click="editGroup(scope.row.circlecommonuid)">
										<img src="../../../assets/images/hangupMessage/edit.svg" />
									</div>
									<div class="btn" title="查看" v-else @click="seeGroupDetail(scope.row.circlecommonuid)">
										<img src="../../../assets/images/hangupMessage/detail.svg" />
									</div>
									<span class="btn pay-btn" v-if="searchData.circletype==1&&scope.row.paystatus==1" @click="pay(scope.row)" title="支付">付</span>
									<div class="btn" :class="scope.row.memberpoint?'need-operate':''" title="成员管理" @click="goMemberManage(scope.row)">
										<img src="../../../assets/images/hangupMessage/member.svg" />
									</div>
									<div :class="scope.row.templatepoint?'need-operate':''" class="btn" title="短信模板" @click="goSMSTemplate(scope.row.circlecommonuid)">
										<img src="../../../assets/images/hangupMessage/template.svg" />
									</div>

									<!--<span class="text-btn" v-if="scope.row.orderstatus==1||scope.row.orderstatus==4" @click="editGroup(scope.row.circlecommonuid)">编辑</span>
									<span class="text-btn" v-else @click="seeGroupDetail(scope.row.circlecommonuid)">查看</span>
									<span class="text-btn" v-if="searchData.circletype==1&&scope.row.paystatus==1" @click="pay(scope.row)">支付</span>
									<span class="text-btn" @click="goMemberManage(scope.row)">成员管理</span>
									<span class="text-btn" @click="goSMSTemplate(scope.row.circlecommonuid)">短信模板</span>-->
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length"></no-data>
		</div>

		<el-dialog title="支付" :visible.sync="payConfirmVisible" width="700px" center>
			<div class="dialog-content" style="padding: 20px 10px;">
				<div class="form-item">
					<p class="form-item-title">集团名称：</p>
					<div class="form-item-content">
						{{obj.circleoldname}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐类型：</p>
					<div class="form-item-content">
						{{productNameList[obj.smstype-1]}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐：</p>
					<div class="form-item-content">
						{{comboidList[obj.comboid-1]}}
						<fee-detail style="margin-left: 40px;" :smstype="obj.smstype"></fee-detail>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐详情：</p>
					<div class="form-item-content">
						<p class="para">
							<span style="margin-right: 14px;">电信</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{obj.dxnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{obj.dxfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{obj.dxfee*obj.dxnum*obj.openmonth/100}}</font>元</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">移动</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{obj.ydnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{obj.ydfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{obj.ydfee*obj.ydnum*obj.openmonth/100}}</font>元</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">联通</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{obj.ltnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{obj.ltfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{obj.ltfee*obj.ltnum*obj.openmonth/100}}</font>元</span>
						</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">有效期：</p>
					<div class="form-item-content">
						{{obj.openmonth}}个月
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">生效开始时间：</p>
					<div class="form-item-content">
						{{obj.begintime==1?'当月':'次月'}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">资费：</p>
					<div class="form-item-content">
						<span class="money">{{obj.orderfee/100}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="obj.discount">
					<p class="form-item-title">优惠金额：</p>
					<div class="form-item-content">
						<span class="orange">{{obj.discount/100}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="obj.discount">
					<p class="form-item-title">实际支付：</p>
					<div class="form-item-content">
						<span class="money">{{(obj.orderfee-obj.discount<0?0:obj.orderfee-obj.discount)/100}}元</span>
					</div>
				</div>
				<p class="use-coupon" @click="openSelectCoupon">使用兑换券或抵用券</p>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="payConfirmVisible = false">取 消</el-button>
			    <el-button type="primary" @click="confirmPay">确 认</el-button>
			  </span>
		</el-dialog>
		<el-dialog top="30vh" :visible.sync="dialogVisible" width="700px" center>
			<div class="success-content">
				<img :src="success" class="success-icon" />
				<p class="success-text">订购成功</p>
				<p class="success-para">已完成下单操作，如需查看请前往订单管理查看订单详情。</p>
			</div>

			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="dialogVisible = false">确 认</el-button>
			  </span>
		</el-dialog>
		<el-dialog class="qualification-des" title="资质说明" top="30vh" :visible.sync="qualificationDesVisible" width="600px">
			<div class="dialog-content" style="padding:20px 10px 20px 0;">
				<div class="form-item">
					<p class="form-item-title">中国移动：</p>
					<div class="form-item-content">
						营业执照<span style="font-size: 14px;color: #666;">（非必填）</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">中国电信：</p>
					<div class="form-item-content">
						营业执照<span style="font-size: 14px;color: #666;">（非必填）</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">中国联通：</p>
					<div class="form-item-content flex" style="align-items: flex-start;">
						<span>营业执照<font style="font-size: 14px;color: #666;">（非必填）</font></span>
						<span style="margin-left: 40px;">业务受理单<span style="font-size: 14px;color: red;">（必填）</span></span>
						<a class="link" download href="https://img.xnhkfpt.com/lvdata/doc/shoulidan.docx">下载</a>
					</div>
				</div>
			</div>

			<div slot="footer" class="dialog-footer text-center">
				<el-button type="primary" @click="qualificationDesVisible=false">确 定</el-button>
			</div>
		</el-dialog>
		<coupon ref="coupon" style="z-index: 99999;" :id="order.ticketuid" :show="selectCouponVisible" @closeCoupon="closeCoupon" @select="selectCoupon"></coupon>
		<fee-detail ref="feeDetail" :smstype="1"></fee-detail>
	</div>
</template>

<script>
	import NoData from '@/components/NoData'
	import Coupon from '@/components/Coupon'
	import FeeDetail from '@/components/FeeDetail'
	import success from '@/assets/images/success.png'
	import { deepClone } from '@/utils/common'
	export default {
		name: 'GroupManage',
		components: {
			NoData,
			Coupon,
			FeeDetail,
		},
		data() {
			return {
				success,
				
				showDes:true,
				loading: false,
				totalCount: 0,
				dialogVisible: false,
				payConfirmVisible: false,
				selectCouponVisible: false,
				qualificationDesVisible: false,
				searchData: {
					pagenow: 1,
					shownum: 10,
					circletype: 1,
					range: 2,
					circleoldname: '',
				},
				list: [],
				productNameList: ['挂机短信（文字版）', '挂机短信（视频版）', '挂短+彩铃'],
				comboidList: ['基础套餐', '标准套餐', '高级套餐'],
				obj: {},
				phoneAndFeeInfo: {},
				order: {

				},
			}
		},
		mounted() {
			this.getData()
			console.log(this.$route)
		},
		methods: {
			tab(index) {
				if(this.searchData.circletype == index) {
					return
				}
				this.searchData.circletype = index
				this.search()
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow = 1
				this.getData()
			},
			getData() {
				this.loading = true
				this.$request.queryGroupList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.list = res.circleList
							this.totalCount = res.page.totalresult
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
					})
			},
			showFeeDetail() {
				this.$refs.feeDetail.feeVisible = true
			},
			addGroup() {
				this.$router.push('/addgroup/1/' + this.searchData.circletype)
			},
			editGroup(circlecommonuid) {
				this.$router.push('/editgroup/' + circlecommonuid)
			},
			seeGroupDetail(id) {
				this.$router.push('/groupdetail/' + id)
			},
			goMemberManage(row) {
				var groupState = row.orderstatus == 3 && row.paystatus == 2
				localStorage.setItem('groupState', groupState)
				this.$router.push('/membermanage/' + row.circlecommonuid + '/' + this.searchData.circletype)
			},
			goSMSTemplate(id) {
				this.$router.push('/smstemplate/' + id)
			},

			getOrderDetail() {
				this.$request.queryOrderDetail({
					ordernum: this.obj.ordernum,
					circletype: this.obj.circletype
				}).then(res => {
					if(res.code == 0) {
						if(res.orderinfo) {
							Object.assign(this.obj, res.orderinfo)
						}
					} else {

					}
				})
			},
			pay(obj) {
				this.obj = deepClone(obj)
				this.$refs.coupon.selectedIndex = 0
				this.getOrderDetail()
				this.payConfirmVisible = true
			},
			confirmPay() {
				console.log({
					ordernum: this.obj.ordernum,
					orderuid: this.obj.orderuid,
					circlecommonuid: this.obj.circlecommonuid,
					ticketuid: this.obj.ticketuid,
				})
				this.$request.pay({
					ordernum: this.obj.ordernum,
					orderuid: this.obj.orderuid,
					circlecommonuid: this.obj.circlecommonuid,
					ticketuid: this.obj.ticketuid,
				}).then(res => {
					if(res.code == 0) {
						this.payConfirmVisible = false
						this.dialogVisible = true
						this.search()
						this.$store.commit('setWaitPayCount')
					} else {
						this.msgError(res.msg)
					}
				})
			},
			openSelectCoupon() {
				this.selectCouponVisible = true
			},
			selectCoupon(coupon) {
				this.obj.discount = coupon.discount_ticket_price
				this.obj.ticketuid = coupon.discount_myticket_uid
			},
			closeCoupon() {
				this.selectCouponVisible = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.desc-wrap {
		position: fixed;
		width: 1024px;
		height: 0;
		top: 114px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: left;
	}
	
	.operate-des {
		position: absolute;
		right: -136px;
		top: 181px;
		padding: 0 16px 0 14px;
		color: #333;
		font-size: 12px;
		background: #EEF6FA;
	}
	
	.operate-title {
		width: 95px;
		font-weight: bold;
		line-height: 16px;
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 12px;
	}
	
	.operate-item {
		margin-bottom: 10px;
	}
	
	.operate-des .operate-icon {
		margin: 0;
	}
	
	.operate-text {
		margin-left: 10px;
	}
	
	>>>.fee-btn {
		display: none!important;
	}
	
	.head {
		border-bottom: 10px solid #f5f5f5;
	}
	
	.tab-panel {
		height: 62px;
		background: #fff;
		border-bottom: 2px solid #f5f5f5;
		.tab-item {
			width: 100px;
			height: 60px;
			text-align: center;
			float: left;
			margin-right: 20px;
			font-size: 16px;
			color: #333;
			cursor: pointer;
			line-height: 60px;
		}
		.selected-item {
			color: #0088EA;
			border-top: 2px solid #0088EA;
			line-height: 56px;
		}
	}
	
	>>>.el-table td,
	.el-table th {
		padding: 6px 0;
	}
	
	.btn {
		width: 30px;
		height: 24px;
		margin-right: 10px;
		text-align: center;
		line-height: 24px;
		color: #fff;
		font-weight: bold;
		font-size: 14px;
		cursor: pointer;
		float: left;
		border-radius: 2px;
		position: relative;
		img {
			width: 100%;
			height: 100%;
		}
	}
	
	.pay-btn {
		background: #6E84FF;
	}
	
	.need-operate {
		&:after {
			position: absolute;
			content: '';
			display: block;
			width: 6px;
			height: 6px;
			background: #FF0000;
			border-radius: 3px;
			right: -3px;
			top: -3px;
		}
	}
	
	.fee-desc {
		color: red;
		font-weight: bold;
		margin-right: 24px;
		height: 32px;
		line-height: 32px;
		cursor: pointer;
	}
	
	.search-wrap {
		padding: 16px 30px 8px;
		background: #fff;
		margin-bottom: 10px;
		>>>.el-radio__inner {
			width: 16px;
			height: 16px;
			border-radius: 3px;
			border: 1px solid #C6C6C6;
			&:after {
				border-radius: 0;
				background: none;
				box-sizing: content-box;
				content: "";
				border: 1.5px solid #fff;
				border-left: 0;
				border-top: 0;
				height: 7px;
				left: 4.5px;
				position: absolute;
				top: 1px;
				transform: rotate(45deg) scaleY(0);
				width: 3px;
				transition: transform .15s ease-in .05s;
				transform-origin: center;
			}
		}
		>>>.el-radio__input.is-checked {
			.el-radio__inner {
				background-color: #409eff;
				border-color: #409eff;
				&:after {
					transform: rotate(45deg) scaleY(1);
				}
			}
		}
	}
	
	.el-dialog__body {
		padding: 16px 16px 24px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			min-height: 184px;
			/*padding: 12px 10px 0;*/
			.form-item {
				display: block;
				margin-right: 0;
				margin-bottom: 8px;
				.form-item-title {
					width: 130px;
					font-weight: bold;
				}
				.form-item-content {
					color: #333;
					width: auto;
					font-weight: normal;
					.money {
						color: #F75124;
						font-size: 16px;
						font-weight: bold;
					}
					.link {
						color: #409EFF;
						text-decoration: underline;
						margin-left: 40px;
					}
				}
			}
			.use-coupon {
				text-align: center;
				color: #409EFF;
				text-decoration: underline;
				line-height: 32px;
				cursor: pointer;
				font-size: 14px;
			}
		}
		.success-content {
			text-align: center;
			.success-icon {
				width: 70px;
				height: 70px;
				display: block;
				margin: 0 auto;
			}
			.success-text {
				font-size: 20px;
				font-weight: bold;
				color: #333333;
				line-height: 40px;
				margin-top: 4px;
			}
			.success-para {
				font-size: 16px;
				margin-top: 7px;
			}
		}
	}
</style>